<template>
	<view class="pb200 ">
		<view v-show="false">
			{{hee}}
		</view>
		<view class="con">
			<view class=" mb40" id="section">
				<image @load="imgload" mode="widthFix" :src="info.wordCard" class="image ra20"></image>
				<view class="flex-ju-b mt40">
					<view class="flex-a-i size60 bold">
						{{info.word}}
					</view>
					<image @click="tapopen" mode="widthFix" :src="info.isCollection?'/static/xings.png':'/static/xing.png'" class="image width42"></image>
				</view>
				<view class="flex-a-i color666 size24 mt30">
					<view @click="voice(info.ukUrl)" class="flex-a-i">{{info.ukPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
					<view @click="voice(info.usUrl)" class="ml50 flex-a-i">{{info.usPhonetic}} <image mode="widthFix" src="/static/yuyin.png" class="image flex width36"></image></view>
				</view>
			</view>
			<view class="flex-ju-b  mb20 " >
				<scroll-view :class="{fixd:ispages}" scroll-with-animation :scroll-left="scrollLeft" :style="{marginTop:ispages?wintop+'px':''}" scroll-x style="white-space: nowrap;">
					<view @click="tapttype(index)" class="mr50" style="display: inline-block;height:35px;" v-for="(item,index) in ['单词讲解','详细释义','双语例句','单词变形','近义词','反义词','词组短语','超级词根','真题','自然拼读','单词笑话','笔记','问问AI']">
						<view class="size28 flex-a-i color666" :class="{active:tindex == index}">
							{{item}}
							<view class="height30 ">
								<image v-if="index==0||index==7||index==8||index==9" mode="widthFix" src="/static/vip.png" class="image width33"></image>
							</view>
						</view>
						<view class="height30 flex-ju-c">
							<image mode="heightFix" v-if="index==tindex" :class="{mr33:index==0||index==7||index==8||index==9}" src="/static/lian.png" class="image height10"></image>
							<image mode="heightFix" v-else src="/static/bbb.png" class="image  height10"></image>
						</view>
					</view>
				</scroll-view>
			</view>
			
				<view id="section0">
					<template v-if="info.isPay">
						<mp-html @ready="ready" isclass="1" :content="info.explanation" />
					</template>
					<image v-else mode="widthFix" :src="info.sysParam" class="image ra20"></image>
				</view>
			
			<view id="section1" >
				<view class="pt30  mb30">
					<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
				</view>
				<view  class="flex-ju-b  ">
					<view class="size32 bold">详细释义</view>
				</view>
				
				<view class="flex-a-i size28">
					<mp-html :content="info.definition"></mp-html>
				</view>
			</view>
			
			<view id="section2" >
				
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			<view  class="size32 bold mb30">双语例句</view>
			
			<view v-for="(items,k) in info.exampleInfos" :key="k" class="flex-ju-b size28 pb40">
				<view class="flex">
					<view>
						<image @click="voice(items.exampleAudioUrl)" mode="widthFix" src="/static/yuyin.png" class="image flex width36 mt3"></image>
					</view>
					<view class="ml5">
						<view class="" @click="voice(items.exampleAudioUrl)">
							<mp-html :content="items.englishExample"></mp-html>
						</view>
						<view class="color666 mt10">
							{{items.chinaExample}}
						</view>
					</view>
				</view>
				
				<view @click="tapaddcang(items,3)" class="ml30">
					<image mode="widthFix" :src="items.isCollection?'/static/xings.png':'/static/xing.png'" class="image flex width36"></image>
				</view>
			</view>
			</view>
			
			
			<view id="section3" >
				
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			
			<view  class="size32 bold mb30">单词变形</view>
			<view class="color666">
				<view v-for="(item,p) in info.inflections" class="mt20" :key="p">
					<mp-html :content="item"></mp-html>
				</view>
			</view>
			</view>
			
			<view id="section4" >
				<view class="pt30  mb30">
					<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
				</view>
				<view class="size32 bold mb30">近义词</view>
				<view class="size28 mb30" v-for="(item,a) in info.synonyms" :key="a">
					<view class="bold">{{item.synonym}}</view>
					<view class="color666 mt5">{{item.paraphrase}}</view>
				</view>
			</view>
			
			
			<view id="section5" >
				<view class="pt30  mb30">
					<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
				</view>
				<view  class="size32 bold pb30">反义词</view>
				<view class="size28 pb30" v-for="(item,ad) in info.antonyms" :key="ad">
					<view class="bold">{{item.antonym}}</view>
					<view class="color666 pt5">{{item.paraphrase}}</view>
				</view>
			</view>
			
			<view id="section6">
				
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			<view  class="size32 bold mb30">词组短语</view>
			<view class="size28 pb30" v-for="(item,ad) in info.phrases" :key="ad">
				<view class="bold">{{item.phrase}}</view>
				<view class="color666 mt5">{{item.paraphrase}}</view>
			</view>
			</view>
			
			<view id="section7" >
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			
			<view class="flex-ju-b mb30">
				<view class="size32 bold">超级词根</view>
				<view class="flex-a-i">
					<image @click="taproots(0)" v-if="rootindex==1" mode="widthFix" src="/static/tian.png" class="image  width46"></image>
					<image @click="taproots(1)" v-if="rootindex==2" mode="widthFix" src="/static/sans.png" class="image ml20 width46"></image>
					<image @click="taproots(2)" v-if="rootindex==0" mode="widthFix" src="/static/hange.png" class="image ml20 width46"></image>
				</view>
			</view>
			<template v-if="info.isPay">
				
			
			<swiper v-if="rootindex==0" @change="swchange" previous-margin="100rpx" next-margin="100rpx" class="swiper height620 ">
				<swiper-item v-for="(item,h) in info.roots" :key="h">
					<view @click="navto('root_detail?id='+item.rootId)" class="flex-ju-c mt20 transition" :class="{scale:sindex==h}">
						<view style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);" class="pg15  wh450-550 ra28">
							<view class="flex-ju-c">
								<image class="wh440-440 ra20" :src="item.rootCard"></image>
							</view>
							<view class="flex-ju-b flex1">
								<view class="size36 bold mt20 mb10 flex-a-i ">								
								  <image mode="widthFix" src="/static/cigen.png" class="image flex width55 mr5"></image>
									<view class="one">{{item.root}}	</view>
								</view>
								<image @clcik="voice(item.phonetic)" mode="widthFix" src="/static/yuyin.png" class="image  width46"></image>
							</view>
							
						</view>
					</view>
				</swiper-item>
			</swiper>
			
			<view v-if="rootindex==1" v-for="(item,p) in info.roots" :key="p" style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);" class="flex-ju-b mb30 pg25-20 ra28">
				<view class="flex-a-i flex1">
					<view>
						<image  :src="item.rootCard" class="image wh80-80 ra15"></image>
					</view>
					<view class="ml15 flex-a-i">
						<image mode="widthFix" src="/static/cigen.png" class="image flex width55 mr10"></image>
						<view class="size32 bold one">{{item.root}}</view>
					</view>
				</view>
				<view class="flex-a-i">
					<view @clcik="voice(item.phonetic)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
						<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
					</view>
						<view @click="navto('root_detail?id='+item.rootId)" class="  ra30 ml20 height40 flex-ju-c size24 color666">
							更多		<image mode="widthFix" src="/static/right.png" class="image flex width15"></image>
						</view>
				</view>
			</view>
			
			<view v-if="rootindex==2"  v-for="(item,y) in info.roots" :key="y" class="border-tECEDEE mt30 pt30 flex-ju-b">
				<view class="flex-a-i">
					<image mode="widthFix" src="/static/cigen.png" class="image flex width55 mr10"></image>
					<view class="size32 bold one">{{item.root}}</view>
				</view>
				<view class="flex-a-i">
					<view @clcik="voice(item.phonetic)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
						<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
					</view>
					<view @click="navto('root_detail?id='+item.rootId)" class="  ra30 ml20 height40 flex-ju-c size24 color666">
						更多		<image mode="widthFix" src="/static/right.png" class="image flex width15"></image>
					</view>
				</view>
			</view>
			</template>
			<image v-else mode="widthFix" :src="info.sysParam" class="image ra20"></image>
			</view>
			
			
			<view id="section8" >
				
			 <view class="pt30  mb30">
			 	<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			 </view>
			 
			<view  class="size32 bold mb30">真题</view>
			<template v-if="info.isPay">
				<view v-for="(itemv,index) in info.questions" :key="index">
					<mp-html :content="itemv"></mp-html>
				</view>
			</template>
			<image v-else mode="widthFix" :src="info.sysParam" class="image ra20"></image>
			</view>
			
			
			<view id="section9" >
				
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			
			<view  class="size32 bold mb30">自然拼读</view>
			<template v-if="info.isPay">
				<view class="flex-ju-c size24">
					<view class="flex-a-i" v-if="info.symbolDto.syllable">
						<view  v-for="(item,f) in info.symbolDto.syllable" :key="f" @click="tabvoice(info.symbolDto,f)" style="min-width: 93rpx;" class="height120 ra10 bgf9f9f9 flex-ju-c flex-col ml10 mr10" :class="{yactive:f==yindex}">
							<view class="size40 bold600 mb10">{{item}}</view>
							<view>{{info.symbolDto.symbol[f]}}</view>
						</view>
						
					</view>
				</view>
			</template>
			 <image v-else mode="widthFix" :src="info.sysParam" class="image ra20"></image>
			 </view>
			 <view id="section10">
				 
			 <view class="pt30  mb30">
			 	<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			 </view>
			 <view class="size32 bold">单词笑话</view>
			 <view v-for="(item,g) in info.jokes" :key="g" class="mt30 mb50">
				 <view class="size28" style="line-height: 23px;">
					 <mp-html :content="item.joke"></mp-html>
				 </view>
				 <view  class="size28 mt15">
					 {{item.paraphrase}}
				 </view>
				 <image @click="voice(item.jokeVideoUrl)" mode="widthFix" src="/static/aiyuyin.png" class="image width54 mt20"></image>
			 </view>
			 </view>
			 <view id="section11" >
				 
			 <view class="pt30  mb30">
			 	<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			 </view>
			
			<view class="flex-ju-b mt50">
				<view  class="size32 bold">笔记</view>
			</view>
			
			<view  class="bgFFF2F4 pg25-20 ra20 mt30">
				<view class="flex-ju-b border-bECEDEE pb30">
					<view class="size28 bold">我的笔记</view>
					<view @click="tapupimg" class="flex-a-i size24 ra10 pg7-15 colorfff bgFD2F55" >
						<image src="/static/xiangji.png" mode="widthFix" class="image width28 flex mr10"></image>
						图片
					</view>
				</view>
				<view class="posire">
					<textarea class="size28 pt20 pb50 width1000" auto-height maxlength="-1" v-model="note" placeholder="在这里写下你的笔记" placeholder-style="color:#898D92"></textarea>
					<image mode="widthFix" src="/static/jiao.png" class="image width44 right-20 bottom-25 posiab"></image>
					<view class="flex-a-i flex-wrap">
						
						
						<view v-for="(item,ds) in images" :key="ds" class="posire width190 mr20 mb20">
							<image :src="item" class="image wh190-190 ra20"></image>
							<view @click="tapclose(ds)" class="wh42-42 ra42 flex-ju-c posiab top10 right10" style="background: rgba(19,28,37,0.5);">
								<uni-icons color="#fff" type="closeempty"></uni-icons>
							</view>
						</view>
					
					</view>
					<view class="flex-ju-c">
						<view @click="tapaddnote" class="flex-ju-c colorfff size28 ra20 bg000 wh200-70">提交</view>
					</view>
				</view>
				
			
			</view>
			
			<view class="flex-a-i mt50">
				<view class="size32 bold">精选笔记</view>
				<image mode="widthFix" src="/static/vip.png" class="image width44"></image>
			</view>
			<template v-if="info.isPay">
				
			<view v-for="(item,a) in info.notes" :key="a" class="mt30 mb80">
				<view class="flex-ju-b size24 color666 ">
					<view class="flex-a-i">
						<image :src="item.avatarUrl" class="image wh32-32 mr10 flex ra32"></image>
						{{item.nickName}}
					</view>
					<image  @click="tapaddcang(item,5)" :src="item.isCollection?'/static/xings.png':'/static/xing.png'" mode="widthFix" class="image width30"></image>
				</view>
				<view class="hidden">
					<view class="size28 pl10 mt20 two" :class="{fith:item.isshow}" style="border-left:5rpx solid #FFF2F4;line-height: 23px;">
							{{item.note}}
					</view>
				</view>
				
				<view v-if="item.isshow" class="flex-ju-b mt10">
					<view></view>
					<view @click="kaizhan(item)" class="colorFD2F55 size24">展开</view>
				</view>
				<view class="flex-a-i flex-wrap">
					<view v-for="(items,da) in item.images" :key="da" class="posire width190 mr20 mt20">
						<image @click="previewimg(item.images,da)" :src="items" class="image wh190-190 ra20"></image>
					</view>
				</view>
				
			</view>
			</template>
			<image v-else mode="widthFix" :src="info.sysParam" class="image ra20 mt30"></image>
			</view>
			
			<view id="section12">
				
			</view>
			<view class="pt30  mb30">
				<view  style="border: 1rpx dashed rgba(19,28,37,0.08);"></view>
			</view>
			<view class="flex-a-i mt50 mb30">
				<view class="size32 bold">问问AI</view>
			</view>
		
			<view class="size24 color666">
				你可以问我任何问题，如:
			</view>
			<view @click="navto('/pages/chat_ai?value='+info.word+'有那些常见搭配？')" class="flex">
				<view class="ra20 pg10-20 mt30 size24" style="border:1px solid #898D92;">
					"{{info.word}}"有那些常见搭配？
				</view>
				 
			</view>
			<view @click="navto('/pages/chat_ai?value=介绍'+info.word+'的典型使用环境')" class="flex">
				<view class="ra20 pg10-20 mt30 size24" style="border:1px solid #898D92;">
					介绍"{{info.word}}"的典型使用环境
				</view>
			</view>
			<view @click="navto('/pages/chat_ai?value=用谐音辅助记忆'+info.word)" class="flex">
				<view class="ra20 pg10-20 mt30 size24" style="border:1px solid #898D92;">
					用谐音辅助记忆"{{info.word}}"
				</view>
			</view>
			<view @click="navto('/pages/chat_ai?value='+info.word+'有哪些常见搭配？')" class="bgFDF3FD pg25-20 ra50 flex-a-i size24 color666 mt30">
				<image src="/static/wenai.png" class="width109 flex mr20" mode="widthFix"></image>
				<view>"{{info.word}}"有哪些常见搭配？</view>
				<image  src="/static/fasong.png" class="width56 flex posiab right45" mode="widthFix"></image>
			</view>
			
			
			
		</view> 
		
		<view v-if="info.isPay==0" class="posifi width1000 zindex5 bottom0">
			<view class="center flex-a-i  bgfff pt30 pl30 pr30" :style="{paddingBottom:bhh+'px'}" style="box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(0,0,0,0.1);border-top-right-radius: 20px;border-top-left-radius: 20px;">
				<view @click="tapopen" class="flex-ju-c flex-col">
					<image mode="heightFix" :src="info.isCollection?'/static/bhongxing.png':'/static/cang.png'" class="image height41"></image>
					<view class="size24 bold">收藏</view>
				</view>
				<button class="but" @click="customer">
					
					<view class="ml50 mr50">
						<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
						<view class="size24 bold">客服</view>
					</view>
					
				</button>
				
				<view @click="tapcourser(1)" class="bg000 flex-ju-c ra20 height80 colorfff flex1">立即解锁</view>
			</view>
		</view>
		
		
		
		
		
		
		<add ref="add" @collection="collection" type="1" :wordId="wordId"></add>
		<uni-popup ref="uplist" background-color="#fff" type="bottom" border-radius="20px 20px 0px 0">
			<view class="" :style="{paddingBottom:bhh+'px'}">
				<view class="con" >
					
				<view class="flex-ju-b pt30">
					<view class="size36 bold">
						解锁课程
					</view>
					<view @click="$refs.uplist.close()">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<view class="bgF9F9F9  height100 ra20 flex-ju-c mt30">
					<view @click="tappindex(1)" :class="{cactive:pindex==1}" class="flex1  height80 flex-ju-c ra20 ml10">词汇量版</view>
					<view @click="tappindex(2)" :class="{cactive:pindex==2}" class="flex1 height80 flex-ju-c mr10 ra20">考试专属版</view>
				</view>
				<scroll-view scroll-y class="height650">
					<nodata v-if="isdata"></nodata>
					<view class="posire bgF9F9F9 mt20 ra20 pg20-25" :class="{lactive:lindex==k}" v-for="(item,k) in courseList" :key="k" @click="taplist(item,k)">
						<view  class=" flex-ju-b   ">
							<view>
								<view class="size28">{{item.courseName}}</view>
								<view class="color666 size22">包含{{item.wordCount}}单词，{{item.rootCount}}词根</view>
							</view>
							<view class="flex-a-i">
								<view class="size24 color666 deleted-text">￥{{item.originalPrice}}</view>
								<view class="size32 colorFD2F55 bold">￥{{item.discountPrice}}</view>
							</view>
						</view>
						<image v-show="lindex==k" mode="widthFix" src="/static/gou.png" style="position: absolute;" class=" image width42  right0 bottom0"></image>
					</view>
				</scroll-view>
				</view>
				<view>
					<view class="size28 color3D3D3D flex-ju-c">购买7天内学习不超过100个单词可以全额退款</view>
					<view class="center flex-ju-b  bgfff  mt10" >
						<button class="but" @click="customer">
							<view class="ml50 mr50">
								<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
								<view class="size24 bold">客服</view>
							</view>
						</button>
						
						<view @click="tapcansou" class="bg000 flex-ju-b ra20 size32 height80 colorfff mr30 flex1 pr30 pl30">
							<view>￥{{oitem.discountPrice}}</view>
							<view>立即解锁</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	function isWordRegex(str) {
	  const words = str.match(/[a-z]+/gi);
	   return words || [];
	}
	export default {
		data() {
			return {
				scrollLeft:0,
				ispages:false,
				allheight:0,
				tagStyle:{
					color:'#00B5FC'
				},
				isdata:false,
				oitem:{
					discountPrice:""
				},
				pirce:0,
				courseList:[],
				lindex:-1,
				sindex:0,
				tindex:0,
				pindex:1,
				wordId:"",
				rootindex:2,
				note:"",
				info:{},
				images:[],
				yindex:-1,
				blindBoxId:"",
				wintop:"",
				scrollTops:0,
				section0:0,
				section1:0,
				section2:0,
				section3:0,
				section4:0,
				section5:0,
				section6:0,
				section7:0,
				section8:0,
				section9:0,
				section10:0,
				section11:0,
				section12:0,
				one:-1,
				two:-1
			}
		},
		onLoad(option) {
			this.wordId=option.id
			this.getinfo()
			this.blindBoxId=option.blindBoxId
		},
		computed:{
			hee(){
				this.$nextTick(() => {
					setTimeout(()=>{
					 this.getViewHeight('section').then(res=>{
						this.allheight = res
					 })
						 this.getViewHeight('section0').then(res=>{
						 	this.section0 = res
						 })
					
					 this.getViewHeight('section1').then(res=>{
					 	this.section1 = res
					 })
					 this.getViewHeight('section2').then(res=>{
					 	this.section2 = res
					 })
					 this.getViewHeight('section3').then(res=>{
					 	this.section3 = res
					 })
					 this.getViewHeight('section4').then(res=>{
					 	this.section4 = res
					 })
					 this.getViewHeight('section5').then(res=>{
					 	this.section5 = res
					 })
					 this.getViewHeight('section6').then(res=>{
					 	this.section6 = res
					 })
					 this.getViewHeight('section7').then(res=>{
					 	this.section7 = res
					 })
					 this.getViewHeight('section8').then(res=>{
					 	this.section8 = res
					 })
					 this.getViewHeight('section9').then(res=>{
					 	this.section9 = res
					 })
					 this.getViewHeight('section10').then(res=>{
					 	this.section10 = res
					 })
					 this.getViewHeight('section11').then(res=>{
					 	this.section11 = res
					 })
				},100)			
				})
				
				return this.one + this.two
			}
		},
		mounted() {
			 this.wintop=uni.getSystemInfoSync().windowTop
		},
		onPageScroll(e) {
			 this.scrollLeft = 65*this.tindex
			
			if(e.scrollTop >= this.allheight){
				this.ispages=true
			}else{
				this.ispages=false
				this.tindex=0
			}
			if( e.scrollTop >= this.allheight+this.section0  ){
				this.tindex=1
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1  ){
				this.tindex=2
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2  ){
				this.tindex=3
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3  ){
				this.tindex=4
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4  ){
				this.tindex=5
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5  ){
				this.tindex=6
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+this.section6  ){
				this.tindex=7
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+
			this.section6+this.section7+20  ){
				this.tindex=8
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+
			this.section6+this.section7+this.section8+20  ){
				this.tindex=9
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+
			this.section6+this.section7+this.section8+this.section9+20  ){
				this.tindex=10
			}
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+
			this.section6+this.section7+this.section8+this.section9+this.section10+80  ){
				this.tindex=11
			}
			
			if( e.scrollTop >= this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+
			this.section6+this.section7+this.section8+this.section9+this.section10+this.section11  ){
				this.tindex=12
			}
		},
		methods: {
			
			tabvoice(url,index){
				this.yindex = index
				this.voice(url.audioUrl[index])
			},
			ready(e){
				this.two= new Date().getTime()
			},
			imgload(){
				this.one= new Date().getTime()
			},
			getViewHeight(id) {
				return new Promise((resolve, reject)=> {
					const query = uni.createSelectorQuery().in(this).select('#'+id)
					query.boundingClientRect((data) => {
						resolve(data.height)
					}).exec()
				})
			},
			getinfo(){
				this.http('/api/word/info',{
					wordId:this.wordId,
					blindBoxId:this.blindBoxId
				},'post').then(res=>{
					res.data.exampleInfos.map(item=>{
						item.englishExample = this.wreplace(res.data.word,item.englishExample)
					})
					res.data.jokes.map(item=>{
						item.joke = this.wreplace(res.data.word,item.joke)
					})
					if(res.data.questions){
						for(let i =0;i<res.data.questions.length;i++){
							res.data.questions[i] = this.wreplace(res.data.word,res.data.questions[i])
						}
					}
				 
					if(res.data.symbolDto){
						res.data.symbolDto.syllable=res.data.symbolDto.syllable.split(',')
						res.data.symbolDto.symbol=res.data.symbolDto.symbol.split(',')
						if(res.data.symbolDto.audioUrl){
							res.data.symbolDto.audioUrl=res.data.symbolDto.audioUrl.split(',')
						}
					}
				
					 
					
					if(res.data.inflections){
						for(let i =0;i<res.data.inflections.length;i++){
							isWordRegex(res.data.inflections[i]).map(item=>{
								res.data.inflections[i] = this.wreplace(item,res.data.inflections[i],1)
							})
						}
					}
					
					res.data.notes.map(item=>{
						if(item.note.length>121){
							item.isshow = true
						}else{
							item.isshow = false
						}
						if(item.images){
							item.images=item.images.split(',')
						}
					})
					
					this.info = res.data
					
					
					// setTimeout(()=>{
					// 	this.getViewHeight('section').then(res=>{
					// 		this.allheight = res
					// 	})
					// },100)
					
				})
			},
			tapcansou(){
				if(this.oitem.discountPrice){
					this.http('/api/orderMain/pay',{
						courseId:this.oitem.courseId
					}).then(res=>{
						uni.requestPayment({
						    provider: 'weixin',
						    orderInfo: 'orderInfo',
							timeStamp:res.data.timeStamp,
							nonceStr:res.data.nonceStr,
							package:res.data.prepayId,
							signType:res.data.signType,
							paySign:res.data.paySign,
						    success:  (res)=> {
						        this.toast('支付成功')
								this.$refs.uplist.close()
								this.getinfo()
						    },
						    fail:  (err)=> {
								this.toast('支付失败')
						    }
						});
					})
				}else{
					this.toast('选择课程')
				}
			},
			tapcourser(courseType){
				this.http('/api/course/queryWordCourseInfo',{
					wordId:this.wordId,
					courseType
				}).then(res=>{
					this.courseList = res.data
					this.nodata(this.courseList,this)
					this.$refs.uplist.open()
				})
			},
			tapaddcang(item,type){
				if(item.isCollection){
					this.http('/api/folder_favorite_relation/cancel',{
						type,
						entryId:item.exampleId?item.exampleId:item.noteId
					}).then(res=>{
						this.toast('已取消')
						item.isCollection=0
					})
				}else{
					this.http('/api/folder_favorite_relation/add',{
						favoriteType:type,
						entryId:item.exampleId?item.exampleId:item.noteId
					},'post').then(res=>{
						this.toast('收藏成功')
						item.isCollection=1
					})
				}
				
			},
			collection(){
				this.info.isCollection=1
				this.toast('收藏成功')
			},
			previewimg(imgs,index){
				uni.previewImage({
					urls: imgs,
					current:index,
					showmenu:false
				})
			},
			tapopen(){
				if(this.info.isCollection==1){
					this.http('/api/folder_favorite_relation/cancel',{
						entryId:this.wordId,
						type:1
					}).then(res=>{
						this.toast('已取消')
						this.info.isCollection=0
						
						var pages = getCurrentPages();
						var page = pages[pages.length - 2];
						page.$vm.isxin =true
					})
				}else{
					
					this.$refs.add.open(1)
				}
			},
			tapaddnote(){
				if(this.note){
					this.http('/api/note/add',{
						isWordOrRoot:1,
						entryId:this.wordId,
						note:this.note,
						images:this.images
					},'post').then(res=>{
						this.note=''
						this.images=[]
						this.toast('提交成功，审核中...')
					})
				}else{
					this.toast('输入笔记内容')
				}
			},
			tapclose(index){
				this.images.splice(index,1)
			},
			tapupimg(){
				if(this.images.length>8){
					this.toast('最多9张图')
					return
				}
				this.upimg(9).then(res=>{
					res.map(item=>{
						this.images.push(item)
					})
				})
			},
			kaizhan(item){
				item.isshow = false
			},
			getDivHeight(id) {
				return new Promise((resolve, reject)=> {
					const query = uni.createSelectorQuery().in(this)
					query.select(id).boundingClientRect((rect) => {
					  resolve(rect.height)
					}).exec()
				})
			  },
			taproots(index){
				this.rootindex = index
				this.getViewHeight('section7').then(res=>{
					this.section7 = res
				})
			},
			 
			tappindex(index){
				this.pindex = index
				this.tapcourser(index)
			},
			taplist(item,index){
				this.lindex = index
				this.oitem = item
			},
			tapttype(index){
				// this.tindex = index
				
				if(index==1){
					this.scrollTops = this.allheight+this.section0
				}else if(index == 2){
					this.scrollTops = this.allheight+this.section0+this.section1
				}else if(index == 3){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2
				}else if(index == 4){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3
				}else if(index == 5){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4
				}else if(index == 6){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5
				}else if(index == 7){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+this.section5+this.section6
				}else if(index == 8){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+
					this.section5+this.section6+this.section7+20
				}else if(index == 9){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+
					this.section5+this.section6+this.section7+this.section8+20
				}else if(index == 10){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+
					this.section5+this.section6+this.section7+this.section8+this.section9+20
				}else if(index ==11){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+
					this.section5+this.section6+this.section7+this.section8+this.section9+this.section10+80
				}else if(index ==12){
					this.scrollTops = this.allheight+this.section0+this.section1+this.section2+this.section3+this.section4+
					this.section5+this.section6+this.section7+this.section8+this.section9+this.section10+this.section11
				}else{
					this.getViewHeight('section').then(res=>{
						this.scrollTops = res
					})
				}
				// if(index>){
					
				// }
				// this.scrollLeft = 65*index
				
				setTimeout(()=>{
					this.scrollToSection1(index)
				},30)
			},
			swchange(e){
				this.sindex=e.detail.current
			},
			scrollToSection1(index) {
				
			      uni.pageScrollTo({
					duration:200,
					scrollTop:this.scrollTops
			        // selector: '#section'+index // 目标元素ID
			      });
			},
			 
		}
	}
</script>

<style>
	.height70{
		/* height:70rpx; */
	}
	.fixd{
		position: fixed;top:0;background: #fff;z-index: 10;
	}
	.lactive{
		border:1px solid #FD2F55;
	}
	.fith{
		-webkit-line-clamp: 5;
		overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-align: start;-webkit-box-orient: vertical;
	}
	.transition{
		transition: all 0.5s;
		transform: scale(0.8);
	}
	.scale{
		transform: scale(1);
	}
	
.active{
	color: #000;
	font-weight: bold;
}
.cactive{
	background: #fff;
}
.yactive{
	color: #FD2F55;
	background: rgba(255,46,83,0.06);
}
.mr33{
	margin-right: 33rpx;
}

uni-button:after {margin: 0;		line-height: normal;
		padding: 0;
		border:none;
		background: none;
	}
	button::after{margin: 0;		line-height: normal;
		padding: 0;
		border:none;
		background: none;
	}
	button{
		line-height: normal;
		margin: 0;
		padding: 0;
		border:none;
		background: none;
	}
	.but{margin: 0;		line-height: normal;
		padding: 0;
		border:none;
		background: none;
	}

 
</style>
